<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-position="left"
      label-width="150px"
      style="margin: 20px 0px 0px 10px; float: left"
    >
      <el-form-item label="社員番号">
        <el-input v-model="form.employeeNumber"></el-input>
      </el-form-item>
      <el-form-item label="会社番号">
        <el-input v-model="form.cardId"></el-input>
      </el-form-item>
      <el-form-item label="氏名（日文）">
        <el-input v-model="form.nameJapanese"></el-input>
      </el-form-item>
      <el-form-item label="氏名（中文）">
        <el-input v-model="form.nameChinese"></el-input>
      </el-form-item>
      <el-form-item label="氏名（英文）">
        <el-input v-model="form.nameEnglish"></el-input>
      </el-form-item>
      <el-form-item label="生年月日">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.birthdate"
            style="width: 150px"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="在籍状况">
        <el-select v-model="form.enrollment" placeholder="请选择">
          <el-option label="在籍" value="在籍"></el-option>
          <el-option label="不在籍" value="不在籍"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="中国携帯番号">
        <el-input v-model="form.chineseMobile"></el-input>
      </el-form-item>
      <el-form-item label="国籍">
        <el-select v-model="form.nationality" placeholder="请选择">
          <el-option label="中国" value="中国"></el-option>
          <el-option label="小日本" value="小日本"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部署">
        <el-select v-model="form.division" placeholder="请选择">
          <el-option label="1部" value="1部"></el-option>
          <el-option label="2部" value="2部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="役職">
        <el-select v-model="form.post" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="メールアドレス">
        <el-input v-model="form.emailAddress"></el-input>
      </el-form-item>
      <el-form-item label="勤務先">
        <el-select v-model="form.workingType" placeholder="请选择">
          <el-option label="大连" value="大连"></el-option>
          <el-option label="沈阳" value="沈阳"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="承認者">
        <el-input v-model="form.firstGradeSuperior"></el-input>
      </el-form-item>
      <el-form-item label="代理承認者">
        <el-input v-model="form.secondGradeSuperior"></el-input>
      </el-form-item>
      <el-form-item label="システム権限">
        <el-checkbox-group v-model="form.authorityCode">
          <el-checkbox label="12者" name="type"></el-checkbox>
          <el-checkbox label="管理者" name="type"></el-checkbox>
          <el-checkbox label="承担者" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="雇用形態">
        <el-select v-model="form.employmentState" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="グレード">
        <el-select v-model="form.grade" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="原籍会社">
        <el-input v-model="form.originalCompany"></el-input>
      </el-form-item>
      <el-form-item label="入社日付">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="入社日付"
            v-model="form.enteringCompanyDate"
            style="width: 150px"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="fallback">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";

// yhl
export default {
  name: "EmpDetail",
  data() {
    return {
      form: {
        employeeNumber: "",
        cardId: "",
        nameJapanese: "",
        nameChinese: "",
        nameEnglish: "",
        birthdate: "",
        enrollment: "",
        nationality: "",
        sex: "",
        division: "",
        post: "",
        emailAddress: "",
        workingType: "",
        firstGradeSuperior: "",
        secondGradeSuperior: "",
        authorityCode: [],
        employmentState: "",
        grade: "",
        originalCompany: "",
        enteringCompanyDate: "",
      },
      empNum: ''
    };
  },
  props: ["empNum"],
  methods: {
    onSubmit() {
    },
    fallback() {
      this.$bus.$emit("editListName", "EmpList");
    },
    onGetEmp(empNum) {
      console.log(empNum)
      axios
        .get("http://localhost:8089/bff/employee/detail?employeeNumber="+empNum)
        .then(
          (response) => {
            this.form = response.data.resultDto;
            this.form.authorityCode = [response.data.resultDto.authorityCode];
          },
          (error) => {
            console.log("请求失败", error.message);
          }
        );
    },
  },
  // mounted() {
  //   this.onGetEmp(this.empNum);
  // },
  activated(){
    this.onGetEmp(this.empNum);
  }
};
</script>